<template>
    <!--<input type="text" :value="modelValue" @input="iptChange" placeholder="请输入"/> 
    
    vue的dom中使用的函数 如果没有写() 则函数有默认参数 参数就是事件对象
    如果有（）则（）内部可以传递多个参数 但是只有$event表示事件对象
    -->
    <input type="text" :value="aaa" @input="iptChange(true, $event)" placeholder="请输入"/>
    <br>
    <input type="text" :value="bbb" @input="iptChange(false, $event)" placeholder="请输入"/>
</template>

<script>
export default {
//   name: '',
    props: {
        modelValue: String, // 父组件通过v-model传递过来的属性 
        aaa: String,
        bbb: String
    },
    setup(props, ctx) {
        console.log(props,ctx);
        // ctx中有一个emit方法 方法的作用相当于vue2中学习的this.$emit方法  
        function iptChange(flag, e) {
            if(flag) {
                ctx.emit('update:aaa', e.target.value)
            } else {
                ctx.emit('update:bbb', e.target.value)
            }
            
        }

        return {
            iptChange
        }
        
    }
}
</script>

<style scoped>
</style>